<div class="crayons-card notification">
  <% json_data = notification.json_data %>
  <%= render "notifications/shared/profile_pic", json_data: json_data %>

  <div class="notification__content">
    <% if notification.action == "Published" %>
      <header class="mb-4">
        <h2 class="fs-base fw-normal">
          <%= message_user_acted_maybe_org(json_data, "views.notifications.new_post.verb_html", if_org: "views.notifications.new_post.if_org_html") %>
        </h2>
        <p class="lh-tight"><small class="fs-s color-base-60"><%= time_ago_in_words json_data["article"]["published_at"], scope: :"datetime.distance_in_words_ago" %></small></p>
      </header>

      <%= render "notifications/shared/article_preview", notification: notification, context: "default" %>
    <% elsif notification.action == "Moderation" %>
      <% new_user = mod_article_user(json_data) %>
      <header class="mb-4">
        <h2 class="fs-xl"><%= t("views.notifications.article.mod_greeting", user: @user.name) %></h2>
        <p class="mb-4"><%= t("views.notifications.article.welcome_html", user: new_user["name"]) %></p>
        <p><%= t("views.notifications.article.published_html", user: link_to(new_user["name"], new_user["path"], class: "crayons-link fw-bold"), title: link_to(h(json_data["article"]["title"]), json_data["article"]["path"], class: "crayons-link fw-bold")) %></p>
      </header>

      <%= render "notifications/shared/article_preview", notification: notification, context: "default" %>

      <div class="flex justify-between fs-s color-base-60 pt-4">
        <p><%= t("views.notifications.article.mod_opt_out") %></p>
        <%= link_to t("views.notifications.article.change_settings"), user_settings_path(:notifications) %>
      </div>
    <% elsif notification.action == "subforem_change" %>
      <%= render "notifications/subforemchange", notification: notification %>
    <% end %>
  </div>
</div>
